<template>
	<div class="kp-wallet">
		<div class="kp-wallet-top"></div>
		<div class="kp-wallet-content">
			<div class="kp-wallet-price tc mg20">
				<p>{{balance}}</p>
				<p class="kp-wallet-money">红包余额(元)</p>
			</div>
			<div class="kp-wallet-neir mg20">
				<ul class="kp-wallet-ul">
					<li class="kp-wallet-item" @click="rpb">
						<span class="kp-wallet-span">我的红包<em class="kp-wallet-em"><em>{{red}}</em>元</em></span><span class="kp-wallet-icon"></span>
					</li>
					<li class="kp-wallet-item kp-wallet-youh" @click="coupone">
						<span class="kp-wallet-span">我的优惠券</span><span class="kp-wallet-icon"></span>
					</li>
					<li class="kp-wallet-item kp-wallet-yue">
						<span class="kp-wallet-span">我的余额<em class="kp-wallet-em"><em>{{balance}}</em>元</em></span>
					</li>
					<li class="kp-wallet-item kp-wallet-jifen">
						<span class="kp-wallet-span">我的积分<em class="kp-wallet-em"><em>{{scoreNum}}</em>分</em></span>
					</li>
				</ul>
			</div>
			<div class="kp-wallet-card">
				<ul class="kp-wallet-ul">
					<li class="kp-wallet-item kp-wallet-yinhang" @click="bank">
						<span class="kp-wallet-span">我的银行卡</span><span class="kp-wallet-icon"></span>
					</li>
				</ul>
			</div>

		</div>
		<div class="big_pho">
			<img :src="coverPicture" v-if="coverPicture"/>
			<img src="../../../assets/tp.png" v-else/>
		</div>
		<div class="youhui">
			<a href="javascript:;" class="youhui_a" @click="getcoupon">领优惠券</a>
		</div>
	</div>
</template>
<script type="text/javascript">
	import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				couponmoney: '',
				total: '',
				coupon: '',
				balance: '',
				red: '',
				scoreNum:'',
				coverPicture:'',
			}
		},
		mounted() {
			this.getmsg();
			this.getenvelopes();
			this.getintegral();
		},
		created() { //创建后

		},
		watch: { //监听放置

		},
		filters: {

		},
		methods: { //方法放置
			filt(str) {
				var s = str + '';
				if(s.indexOf('.') > -1) {
					s = s.split('.');
					if(s[1]) {
						if(s[1].length == 1) {
							s[1] = s[1] + '0';
						} else {
							s[1] = s[1].substring(0, 2)
						}
						s = s.join('.');
					}
				} else {
					s = s + '.00';
				}
				return s;
			},
			//我的余额
			getmsg() {
				let param={
					"userID":this.userinfo.userID
				};
				let that = this;
				this.$http.post(this.$baseUrl.baseurl + "kpcx/appMyWallet/myWalletHome", param).then((res) => {
					that.balance=that.filt(res.data.Result.rmMoney);
				}).catch((err) => {
					
				})
			},
			//我的红包
			getenvelopes() {
				let param={
					"userID":this.userinfo.userID
				};
				let that = this;
				this.$http.post(this.$baseUrl.baseurl + "kpcx/appMyWallet/myRedBagHome", param).then((res) => {
					this.red = that.filt(res.data.Result.redEnvelopeTotalMoney);
				}).catch((err) => {
					
				})
			},
			//我的积分
			getintegral() {
				let param={
					"userID":this.userinfo.userID
				};
				let that = this;
				this.$http.post(this.$baseUrl.baseurl + "integral/appsignin/myScore", param).then((res) => {
					console.log(res);
					this.scoreNum = res.data.Result.scoreNum;
				}).catch((err) => {
					
				})
			},
			coupone(){
				this.$router.push({
					path:'/my/coupon/couponList',
				})
			},
			getcoupon(){
				this.$router.push({
					path:'/my/coupon/getcoupon',
				})
			},
			bank(){
				this.$router.push({
					path:'/my/bank',
				})
			},
			rpb(){
				this.$router.push({
					path:'/my/rpb',
				})
			}
		},
		components: {

		},
		computed: mapGetters([
			'userinfo',
		]),
	}
</script>
<style type="text/css" scoped>
	.mg20 {
		margin-bottom: 20px;
	}
	
	.kp-wallet{
		background: #F4F5F9;
	}
	
	.kp-wallet-content {
		margin: -127px auto 0;
		width: 717px;
		font-family: "MicrosoftYaHei";
	}
	
	.kp-wallet-content>div {
		width: 100%;
		box-shadow: 0 0 0 6px rgba(93, 224, 213, 0.11);
		background: #fff;
		border-radius: 15px;
	}
	
	.kp-wallet-top {
		height: 295px;
		background: url("../../../assets/bg-jianbian.png") center no-repeat;
		background-size: cover;
	}
	
	.kp-wallet-price {
		height: 210px;
		font-size: 74px;
		color: rgb(51, 51, 51);
		padding-top: 50px;
		box-sizing: border-box;
	}
	
	.kp-wallet-money {
		font-size: 26px;
		color: rgb(102, 102, 102);
		margin-top: 30px;
	}
	
	.kp-wallet-neir {
		height: 398px;
	}
	
	.kp-wallet-item {
		width: 100%;
		height: 99.5px;
		box-sizing: border-box;
		position: relative;
		line-height: 99.5px;
	}
	
	.kp-wallet-item::before {
		content: "";
		background: url("../../../assets/hongbao.png") center no-repeat;
		background-size: cover;
		display: inline-block;
		width: 31px;
		height: 37px;
		position: absolute;
		left: 23px;
		top: 31px;
	}
	
	.kp-wallet-youh::before {
		content: "";
		background: url("../../../assets/youhuiquan.png") center no-repeat;
		background-size: cover;
		display: inline-block;
		width: 32px;
		height: 37px;
		position: absolute;
		left: 23px;
		top: 31px;
	}
	
	.kp-wallet-yue::before {
		content: "";
		background: url("../../../assets/yue.png") center no-repeat;
		background-size: cover;
		display: inline-block;
		width: 34px;
		height: 36px;
		position: absolute;
		left: 23px;
		top: 30.5px;
	}
	
	.kp-wallet-jifen::before {
		content: "";
		background: url("../../../assets/jifen.png") center no-repeat;
		background-size: 33px 36px;
		display: inline-block;
		width: 34px;
		height: 36px;
		position: absolute;
		left: 23px;
		top: 30.5px;
	}
	
	.kp-wallet-yinhang::before {
		content: "";
		background: url("../../../assets/yinhangka.png") center no-repeat;
		background-size: 38px 33px;
		display: inline-block;
		width: 38px;
		height: 34px;
		position: absolute;
		left: 23px;
		top: 33.5px;
	}
	
	.kp-wallet-icon {
		background: url("../../../assets/right-1.png") center no-repeat;
		background-size: cover;
		display: inline-block;
		width: 14px;
		height: 25px;
		position: absolute;
		right: 17px;
		top: 37px;
	}
	
	.kp-wallet-span {
		color: rgb(68, 68, 68);
		font-size: 30px;
		/*font-weight: 600;*/
		padding-left: 85px;
		padding-right: 31px;
		display: inline-block;
		width: 100%;
		height: 99.5px;
		box-sizing: border-box;
	}
	
	.kp-wallet-card {
		height: 98px;
	}
	
	.kp-wallet-em {
		float: right;
		font-size: 28px;
		color: rgb(138, 138, 138);
		margin-right: 21px;
	}
	
	.kp-wallet-em>em {
		margin-right: 10px;
	}
	
	.big_pho {
		width: 100%;

		height: 148px;
		margin-top: 34px;
	}
	
	.big_pho>img {
		width: 100%;

		height: 148px;
	}
	
	.youhui {
		width: 719px;
		height: 98px;
		margin: 0 auto;
		position: fixed;
		bottom: 20px;
		left: 16px;
	}
	
	.youhui_a {
		width: 719px;
		height: 98px;
		background: rgb(59, 195, 194);
		line-height: 98px;
		color: #fff;
		border-radius: 15px;
		text-align: center;
		font-size: 34px;
		display: inline-block;
	}
</style>